<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>凭证文件安装</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{//cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css}">
    <!-- 引入jQuery -->
    <script th:src="@{//cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js}"></script>
</head>
<body>
<div class="container mt-5">
    <!-- 凭证状态显示区域 -->
    <div id="credentialStatus" class="alert mb-4"></div>

    <h1 class="mb-4">凭证文件安装/更新</h1>
    <form id="uploadForm" method="post" enctype="multipart/form-data">
        <div class="mb-3">
            <label class="form-label">选择凭证文件:</label>
            <input type="file" name="file" class="form-control" required>
        </div>
        <button type="submit" class="btn btn-primary">安装凭证</button>
    </form>

    <!-- 结果展示区域 -->
    <div id="resultContainer" class="mt-4"></div>
</div>

<!-- 页面脚本（放在body末尾符合最佳实践） -->
<script th:inline="javascript">
    /*<![CDATA[*/
    $(function() {
        // 页面加载时检查凭证状态
        checkCredentialStatus();

        // 表单提交处理
        $("#uploadForm").submit(function(e) {
            e.preventDefault();
            submitForm();
        });
    });

    // 检查凭证状态
    function checkCredentialStatus() {
        $.ajax({
            url: "/cert/status",
            type: "GET",
            dataType: "json",
            success: function(response) {
                const statusElement = $("#credentialStatus");
                statusElement.removeClass().addClass("alert");
                if (response.status === 'EXPIRED') {
                    statusElement.addClass("alert-warning").text("凭证已过期，请更新");
                } else {
                    statusElement.addClass("alert-success").text("合法凭证信息");
                }
            },
            error: function() {
                $("#credentialStatus").addClass("alert-danger").text("凭证状态检查失败");
            }
        });
    }

    // 提交表单
    function submitForm() {
        const formData = new FormData($("#uploadForm")[0]);
        const resultContainer = $("#resultContainer");
        resultContainer.html("");

        $.ajax({
            url: "/cert/upload",
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                if (response.code == 200) {
                    resultContainer.html('<div class="alert alert-success mt-3">凭证安装成功</div>');
                }else{
                    resultContainer.html('<div class="alert alert-danger mt-3">凭证安装失败</div>');
                }
                // 更新凭证状态
                checkCredentialStatus();
            },
            error: function(xhr) {
                resultContainer.html('<div class="alert alert-danger mt-3">请求失败: ' +
                                    (xhr.responseJSON?.message || '服务器错误') + '</div>');
            }
        });
    }
    /*]]>*/
</script>

<!-- 引入Bootstrap JS -->
<script th:src="@{//cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js}"></script>
</body>
</html>